﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="Overview">
    <h2><DemoNavLink Link="FormLayout#Overview" />Form Layout - Overview</h2>
    <p>
        The DevExpress <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout">Form Layout</a> component for Blazor allows you to easily construct responsive and automatically-aligned edit forms.
    </p>
    <p>
        The Form Layout component uses the Bootstrap grid system markup: each layout item occupies between 1 and 12 virtual columns. This value can be defined separately for five different screen resolution types, as listed below:
    </p>
    <ol>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.ColSpanXl">ColSpanXl</a> - Extra large screens (1200px or wider).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.ColSpanLg">ColSpanLg</a> - Large screens (992px or wider).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.ColSpanMd">ColSpanMd</a> - Medium screens (768px or wider).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.ColSpanSm">ColSpanSm</a> - Small screens (576px or wider).</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.ColSpanXs">ColSpanXs</a> - Extra small screens (less than 576px).</li>
    </ol>
    <p>
        Form Layout items support different size modes. To specify the item's size in code, use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout.ItemSizeMode">ItemSizeMode</a> property. To apply different size modes, use the drop-down list in the demo card's header.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                @nameof(Name)=<b>@Name</b>, @nameof(Email)=<b>@Email</b>, @nameof(BirthDate)=<b>@BirthDate</b>, @nameof(YearsWorked)=<b>@YearsWorked</b>, @nameof(OnVacation)=<b>@OnVacation</b>
            </TitleTemplate>
        </DemoToolbar>
    </div>

    <div class="card-body card-body-fl">
        <DxFormLayout ItemSizeMode="SizeMode">
            <DxFormLayoutItem Caption="Contact Name:" ColSpanMd="6">
                <Template>
                    <DxTextBox @bind-Text="@Name"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Email:" ColSpanMd="6">
                <Template>
                    <DxTextBox @bind-Text="@Email"></DxTextBox>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Birth Date:" ColSpanMd="6">
                <Template>
                    <DxDateEdit @bind-Date="@BirthDate"></DxDateEdit>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="Years Worked:" ColSpanMd="6">
                <Template>
                    <DxSpinEdit @bind-Value="@YearsWorked"></DxSpinEdit>
                </Template>
            </DxFormLayoutItem>

            <DxFormLayoutItem Caption="On Vacation:">
                <Template>
                    <DxCheckBox @bind-Checked="@OnVacation"></DxCheckBox>
                </Template>
            </DxFormLayoutItem>
        </DxFormLayout>

    </div>
</div>

<CodeSnippet_FormLayout_Default />

@code {
    string Name { get; set; } = "Nancy Davolio";
    string Email { get; set; } = "NancyDavolio@sample.com";
    DateTime BirthDate { get; set; } = DateTime.Now.AddYears(-20);
    int YearsWorked { get; set; } = 3;
    bool OnVacation { get; set; } = true;
}
